<script setup lang="ts">

import OjViewCard, { OjViewCardProps } from '@/views/Admin/Problem/GetFromRemote/OjViewCard.vue';
import http from '@/utils/http';
import { onMounted, ref } from 'vue';

interface RemoteOJList {
  list: OjViewCardProps[];
}

const getRemoteOJList = async () => {
  return (await http.get('/Admin/allremoteoj/')) as RemoteOJList;
};

const remoteOJList = ref<RemoteOJList>({ list: [] });

onMounted(async () => {
  const response = await getRemoteOJList();
  remoteOJList.value = response as RemoteOJList;
});

</script>

<template>
  <div style="display: flex; flex-direction: column">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/admin/user">管理员设置</a></li>
        <li class="breadcrumb-item"><a href="/admin/problem-list/">题目管理</a></li>
        <li class="breadcrumb-item active" aria-current="page">远程题库</li>
      </ol>
    </nav>
    <div class="container">
      <div class="row mt-3">
        <h1>我们支持的题库</h1>
        <template v-for="item in remoteOJList.list" :key="item.id">
          <div class="col-6 mt-3">
            <OjViewCard :online-judge="item"></OjViewCard>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">

</style>
